<template>
  <div class="content">
    <dc-header :page-to="'/itemRank'"
               :title="'滞销规则设置'"
               :action-title="'保存'"
               @submit="_save">
    </dc-header>
    <div class="head-top mt20">
      <dc-row class="p bg-white" type="flex" justify="space-around" align="middle">
        <dc-col span="11" class="text-left">
          <span>设置数量规则</span>
        </dc-col>
        <dc-col span="12" class="text-right">
          <span>销量≤</span><input class="num-input" placeholder="4" v-model="sellNum">份
        </dc-col>
      </dc-row>
      <div class="mt20 bg-white">
        <dc-row class="mix1px p" type="flex" justify="space-around" align="middle">
          <dc-col span="11" class="text-left">
            <span>设置关注品类</span>
          </dc-col>
          <dc-col span="11" class="text-right">
            <dc-checkbox @boxChecked="allChecked()" :status="checkStatus" :checkVal="'全选'"></dc-checkbox>
          </dc-col>
        </dc-row>
        <div class="card-content mint-cell-wrapper">
          <div class="card-content-inner">
            <span class="tag-inaccess" @click="changeColor(index)"
                  :class="{'tag-access': item.seclectedFlag===1}"
                  v-for="(item, index) in dishCategoryList">
              <i v-if="item.seclectedFlag===1" class="iconfont icon-rule-check"></i>{{item.dishCategoryName}}
            </span>
            <span class="pb20 gray" v-if="dishCategoryList.length==0">暂无数据</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import cell from '@/components/cell';
  import {col, row} from '@/components/Flex';
  import checkbox from '@/components/checkbox';
  import api from '@/common/api/dishAnalysis';
  import mintUi from '@/common/mintUi';
  import store from '@/store/shopAlter';

  export default {
    data () {
      return {
        sellNum: 5,
        checkStatus: '0',
        storeCode: '',
        dishCategoryList: []
      };
    },
    created () {
      this.storeCode = store.state.shopAlter.store.storeCode;
    },
    activated () {
      this.getList(this.storeCode);
    },
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row,
      'dc-checkbox': checkbox
    },
    methods: {
      //全选功能
      allChecked () {
        this.checkStatus = this.checkStatus === '0' ? '1' : '0';
        this.dishCategoryList.forEach((item, index) => {
          this.dishCategoryList[index].seclectedFlag = this.checkStatus === '1' ? 1 : 0;
        });
      },
      //改变状态颜色
      changeColor (index) {
        let temp = '';
        let flag = this.dishCategoryList[index].seclectedFlag;
        this.dishCategoryList[index].seclectedFlag = flag === 1 ? 0 : 1;
        this.dishCategoryList.forEach(item => {
          temp = temp + item.seclectedFlag;  //状态保存为字符串example:110110
        });
        if (temp.indexOf('0') < 0) {  //是否有未选的
          this.checkStatus = '1';   //改变全选框的状态
        } else {
          this.checkStatus = '0';
        }
      },
      //保存设置
      _save () {
        let data = {
          storeCode: this.storeCode,
          sellNum: this.sellNum,
          checkAllFlag: this.checkStatus,
          dishCategoryList: []
        };
        this.dishCategoryList.forEach((item) => {
          if (item.seclectedFlag === 1) {
            data.dishCategoryList.push({
              dishCategoryCode: item.dishCategoryCode,
              dishCategoryName: item.dishCategoryName
            });
          }
        });
        api.setRull(data)
          .then(res => {
            mintUi.openToast('设置成功');
            this.getList(this.storeCode);
          });
      },
      //获取规则列表
      getList (code) {
        api.getRull(code)
          .then(res => {
            if (res && res.dishCategoryList.length > 0) {
              this.dishCategoryList = res.dishCategoryList;
            }
            this.sellNum = res.sellNum;
            this.checkStatus = res.checkAllFlag + '';
          });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .gray{
    color: #999;
  }
  .p {
    padding: px2rem(30px) px2rem(10px);
    font-size: px2rem(32px);
  }
  .icon-rule-check{
    font-size: px2rem(24px);
    margin-right: 5px;
  }
  .card-content {
    margin-top: px2rem(30px);
    padding: 0;
    display: block;
    .card-sub-title {
      font-size: px2rem(28px);
      color: #333;
      font-weight: bold;
      padding: px2rem(30px) px2rem(24px) 0 px2rem(24px);
    }
    .card-content-inner {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      padding: px2rem(30px) px2rem(24px) 0 px2rem(24px);
    }
  }

  .num-input {
    display: inline-block;
    width: px2rem(100px);
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: px2rem(10px);
    margin: 0 5px;
  }

  .pt20 {
    padding-top: px2rem(20px);
  }
</style>
